<template>
  <div class="wordlist_wrapper" ref = "word_list_wrapper" style="margin: 0 auto;max-width: 600px;height: 310px;overflow: hidden">
    <router-link to="/worddetail">
      <div @click="list_item_click(item.id)" class = "word_item" style="display: flex" v-for="item in see_find_word_list">
        <div >{{item.src}}</div>
        <div v-show="showfyi" >{{item.tgt}}</div>
      </div>
    </router-link>

  </div>
</template>

<script>
  import BScroll from "better-scroll"
  import { mapGetters, mapState } from 'vuex'
    export default {
    props: ['showfyi'],
      name: "WordList",
      computed:{
        ...mapState(['see_find_word_list']),
        ...mapGetters({ see: 'see'})
      },
      created() {
      this.$nextTick(()=>{
        this.word_list_scroll = new BScroll(this.$refs.word_list_wrapper, {probeType: 1, click: true})
        console.debug("create and initscroll")
      })
      },
      methods: {
        list_item_click(id){
          this.$store.commit('setWordDetailId', id)
          window.localStorage.setItem("cur_wordid", id)
        }
      }

    }
</script>

<style>
  .wordlist_wrapper a{ text-decoration: none;display: block;color: black}
  /*.wordlist_wrapper a:active{text-decoration: none}*/

</style>

<style scoped>
.word_item div{
  margin: 5px auto;
}
.word_item{transition: all 0.5s;margin: 0 auto}
.word_item:active{
  background-color: #05204e;
}
</style>
